<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>初识ajax开发</title>
	<script>
		window.onload = function(){
			var btn = document.getElementById("btn");
			
			btn.onclick = function(){
				var username = document.getElementById('username').value;
				var password = document.getElementById("password").value;
				// 使用ajax需要以下几个步骤
				// 1.创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				// 2.准备发送
				xhr.open('get', './01check.php?username='+username+"&password="+password, true);
				// 3.执行发送动作
				xhr.send(null);
				// 4.执行回调函数
				xhr.onreadystatechange= function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							var data = xhr.responseText;
							var info = document.getElementById("info");
							if(data == '1'){
								info.innerHTML = '登录成功';
							}else if(data == '2'){
								info.innerHTML = '用户名或者密码错误';
							}
						}
					}
				}
			}
		}
	</script>
</head>
<body>
	 <form>
        用户名：<input type="text" name="username" id="username"><span id="info"></span><br>
        密码：<input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>
</body>
</html>